import React,{Component} from 'react';
import { 
	View, 
	Text,
	ScrollView,
	Image, 
	StatusBar,
	TouchableWithoutFeedback
} from 'react-native';
import Loading from 'react-native-lindf-loading';
export default class UserTab extends Component {
	constructor(props){
    	super(props);
    	this.state = {
    		isModal: false,
    		isLogin: false,
    	}
    }

    componentWillMount(){
        global.UserTabIndex = this;
    }

    _showModal() {
        this.setState({
            isModal:true
        })

        setTimeout(() => {
            this.setState({
                isModal:false
            });
        }, 300)
    }

    _onRequestClose() {
        this.setState({
            isModal: false
        });
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <View>
                	<Image 
	                	style={{width: '100%', height: 105}} 
	                	source={require('../../images/my-bg.jpg')}
                	/>
                	<View style={{paddingLeft: 15, paddingRight: 15, height: 60, position: 'absolute', left: 0, right: 0, top: 0, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
						<TouchableWithoutFeedback onPress={()=>this.props.navigate('Set')}>
							<View>
								<Image 
				                	style={{width: 24, height: 23}} 
				                	source={require('../../images/setUp.png')}
			                	/>
	                		</View>
                		</TouchableWithoutFeedback>
                		<TouchableWithoutFeedback onPress={()=>this.props.navigate('Message')}>
	                		<View>
								<Image 
				                	style={{width: 22, height: 19}} 
				                	source={require('../../images/message.png')}
			                	/>
	                		</View>
                		</TouchableWithoutFeedback>
                	</View>
                </View>
                <View style={{height: '100%', paddingBottom: 60, position: 'absolute', left: 15, right: 15, top: 60}}>
					<ScrollView
	                    showsVerticalScrollIndicator={false}
					>
						<View style={{backgroundColor: '#fff', marginBottom: 10}}>
							<View style={{paddingLeft: 14, paddingTop: 14, paddingBottom: 18, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
								<View style={{flexDirection: 'row', alignItems: 'center'}}>
									<View style={{width: 60, height: 60, marginRight: 8, overflow: 'hidden', borderRadius: 100}}>
										{
											this.state.isLogin?
											<Image
							                	style={{width: 60, height: 60}}
							                	source={require('../../images/user.jpg')}
						                	/>
											:
											<TouchableWithoutFeedback onPress={()=>this.props.navigate('Login')}>
												<Image
								                	style={{width: 60, height: 60}}
								                	source={require('../../images/noLogin.png')}
							                	/>
						                	</TouchableWithoutFeedback>
										}
					                	
									</View>
									{
										this.state.isLogin?
										<Text style={{fontSize: 14,color: '#555454'}}>林帅帅</Text>
										:
										<TouchableWithoutFeedback onPress={()=>this.props.navigate('Login')}>
											<View>
												<Text style={{fontSize: 14,color: '#555454'}}>未登录/点击登录</Text>
											</View>
										</TouchableWithoutFeedback>
									}
								</View>
								<View style={{width: 90, height: 30, justifyContent: 'center', alignItems: 'center', backgroundColor: '#cad8ef', borderTopLeftRadius: 20, borderBottomLeftRadius: 20}}>
									<Text style={{fontSize: 13,color: '#000'}}>积分：100</Text>
								</View>
							</View>

							<View style={{paddingLeft: 5, paddingRight: 5, paddingBottom: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyCollection')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 22, height: 24}}
						                	source={require('../../images/shopCollect.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>商品收藏</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('NewsCollection')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 21, height: 23}}
						                	source={require('../../images/txtCollect.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>文章收藏</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('Kefu')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 24, height: 24}}
						                	source={require('../../images/vipIco.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>客户经理</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('FootPrint')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 16, height: 24}}
						                	source={require('../../images/zuCollect.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>足迹浏览</Text>
									</View>
								</TouchableWithoutFeedback>
							</View>
						</View>
						<View style={{backgroundColor: '#fff', marginBottom: 10}}>
							<View style={{paddingLeft: 14, paddingRight: 14}}>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyOrder',{page: 0})}>
									<View style={{height: 40, borderBottomWidth: 1, borderColor: '#eeeeee', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
										<Text style={{fontSize: 15, color: '#535353'}}>我的订单</Text>
										<View style={{flexDirection: 'row', alignItems: 'center'}}>
											<Text style={{fontSize: 15, color: '#535353'}}>查看全部</Text>
											<Image
							                	style={{width: 7, height: 14, marginLeft: 6}}
							                	source={require('../../images/rightGo.png')}
						                	/>
										</View>
									</View>
								</TouchableWithoutFeedback>
							</View>
							<View style={{paddingLeft: 5, paddingRight: 5, paddingBottom: 12, paddingTop: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyOrder',{page: 0})}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 25, height: 23}}
						                	source={require('../../images/noPay.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>待付款</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyOrder',{page: 1})}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 24, height: 20}}
						                	source={require('../../images/hasPay.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>待发货</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyOrder',{page: 2})}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 26, height: 21}}
						                	source={require('../../images/hasSend.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>待收货</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyOrder',{page: 3})}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 19, height: 20}}
						                	source={require('../../images/hasFinish.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>待评价</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('FlatList')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 19, height: 20}}
						                	source={require('../../images/apply.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>售后服务</Text>
									</View>
								</TouchableWithoutFeedback>
							</View>
						</View>
						<View style={{backgroundColor: '#fff', marginBottom: 10}}>
							<View style={{paddingLeft: 14, paddingRight: 14}}>
								<View style={{height: 40, borderBottomWidth: 1, borderColor: '#eeeeee', flexDirection: 'row', alignItems: 'center'}}>
									<Text style={{fontSize: 15, color: '#535353'}}>快捷按钮</Text>
								</View>
							</View>
							<View style={{paddingLeft: 5, paddingRight: 5, paddingBottom: 12, paddingTop: 12, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
								<TouchableWithoutFeedback onPress={()=>{this.props.navigate('MyModel')}}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 23, height: 23}}
						                	source={require('../../images/chicun.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>我的尺码</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('Near')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 26, height: 21}}
						                	source={require('../../images/map.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>附近维修点</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('Kefu')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 23, height: 23}}
						                	source={require('../../images/kefu.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>客服中心</Text>
									</View>
								</TouchableWithoutFeedback>
								<TouchableWithoutFeedback onPress={()=>this.props.navigate('MyAddress')}>
									<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', height: 46}}>
										<Image
						                	style={{width: 20, height: 23}}
						                	source={require('../../images/addressIco.png')}
					                	/>
										<Text style={{fontSize: 12, color: '#555454'}}>地址管理</Text>
									</View>
								</TouchableWithoutFeedback>
							</View>
						</View>
						<View style={{marginBottom: 10, borderRadius: 8, overflow: 'hidden'}}>
							<Image
			                	style={{width: '100%', height: 100}}
			                	source={require('../../images/ad1.jpg')}
		                	/>
						</View>
						<View style={{marginBottom: 10, borderRadius: 8, overflow: 'hidden'}}>
							<Image
			                	style={{width: '100%', height: 100}}
			                	source={require('../../images/ad2.jpg')}
		                	/>
						</View>
					</ScrollView>
                </View>
                <Loading 
                    visible={this.state.isModal} 
                    onRequestClose={this._onRequestClose.bind(this)}
                />
            </View>
        );
    }
}